<template>
	<view>
		<image class="fixedimage" @click="record" mode="widthFix"
			src="https://duimianimg.loovee.com/style/jww/act/client/feedback/img/mz_gr_ts_jilu-5f4690e.png"></image>

		<!-- 投诉问题 -->
		<view class="title">* 投诉问题</view>
		<view class="list flex ac" @click="open">
			<view v-if="indextitle==''" class="listtext">请选择</view>
			<view v-else class="listtext">{{indextitle}}</view>
			<image style="width: 50rpx;" mode="widthFix" src="../../static/icon/right1.png"></image>
		</view>

		<!-- 投诉内容 -->
		<view class="title">* 投诉内容</view>
		<view class="textarea-box">
			<textarea @input="describe" maxlength="300" v-model.trim="lengatext" class="neirong"
				placeholder-style="font-size:26rpx;color:#8a8a8a;" placeholder="填写点什么吧"></textarea>
			<view class="textarea-text">{{lengatue}}/300</view>
		</view>

		<!-- 填写手机 -->
		<view class="title">* 联系电话</view>
		<view class="inputbox">
			<input class="searchbar-input" @input="sousuo" v-model.trim="phonevalue" maxlength="11" type="number"
				placeholder-style="color:#8a8a8a;
					font-size:29rpx;" placeholder="仅做投诉问题处理，我们会保护您的隐私" />
		</view>

		<!-- 上传图片和上传视频 -->
		<view class="title">上传截图/凭证</view>
		<view class="uploadbox">
			<!-- 上传图片 -->
			<view v-for="(item,index) in arrlist" :key="index" @tap="viewImage(index)" class="uploadpicture"
				style="position: relative;">
				<image :src='item.url' mode='aspectFill'></image>
				<view class="cuIcon-close" @tap.stop="delImg(index)">
					<image
						src="https://duimianimg.loovee.com/style/jww/act/client/feedback/img/mz_gr_ts_icon_shanchu-83bd5c6.png">
					</image>
				</view>
			</view>
			<view v-if="arrlist.length<5" class="uploadpicture" @click="ChooseImage">
				<image
					src="https://duimianimg.loovee.com/style/jww/act/client/feedback/img/mz_gr_ts_icon_tupian-68a2fba.png">
				</image>
			</view>
			<!-- 上传视频 -->
			<view v-if="srcList==''" class="uploadvideo" @tap="chooseVideo">
				<image
					src="https://duimianimg.loovee.com/style/jww/act/client/feedback/img/mz_sqsh_icon_shipin-65037df.png">
				</image>
				<view class="uploadvideotext">
					<view>上传视频凭证</view>
					<view>(最多1个60s视频)</view>
				</view>
			</view>
			<view v-if="srcList!==''" class="uploadvideo" style="position: relative;">
				<video :disabled="false" :controls="false" :src="srcList" class="video" object-fit="fill">
					<cover-view class="htz-image-upload-Item-video-fixed" @click="previewVideo"></cover-view>
				</video>
				<view class="cuIcon-closea" @tap.stop="delectVideo">
					<image
						src="https://duimianimg.loovee.com/style/jww/act/client/feedback/img/mz_gr_ts_icon_shanchu-83bd5c6.png">
					</image>
				</view>
			</view>
		</view>

		<view class="preview-full" v-if="previewVideoSrc==true">
			<video :autoplay="true" :src="srcList" :show-fullscreen-btn="false">
				<cover-view class="preview-full-close" @click="previewVideoClose">
					<image style="width: 38rpx;height: 38rpx;"
						src="https://duimianimg.loovee.com/style/jww/act/client/feedback/img/mz_gr_ts_icon_shanchu-83bd5c6.png">
					</image>
				</cover-view>
			</video>
		</view>

		<!--内容文字 -->
		<view class="titleexplain">*请勿重复投诉，相关部门工作人员会在1~3个工作日处理您的投诉问题。游戏申诉问题可直接联系在客服处理，重复处理的问题会被过滤，请谅解。</view>

		<!-- 提交按钮 -->
		<view class="buttom" @click="buttondata">提交</view>
		<view style="width: 100%;height: 30rpx;"></view>

		<!-- 弹窗样式 -->
		<u-popup v-model="show" mode="bottom" border-radius="20">
			<view>
				<view class="popup-title">选择投诉的问题
					<view @click="close" class="closebox">
						<u-icon name="close" color="#b1b1b1"></u-icon>
					</view>
				</view>
				<view class="choice" @click="xuanzedata(0)">
					<view class="choice-text" :style="indextext==0?'color:#ff6144;':'color:#323233;'">产品体验反馈</view>
					<image v-if="indextext==0"
						src="https://duimianimg.loovee.com/style/jww/act/client/feedback/img/mz_gr_ts_icon_xuanzhong-5949c25.png">
					</image>
				</view>
				<view class="choice" @click="xuanzedata(1)">
					<view class="choice-text" :style="indextext==1?'color:#ff6144;':'color:#323233;'">商品质量反馈</view>
					<image v-if="indextext==1"
						src="https://duimianimg.loovee.com/style/jww/act/client/feedback/img/mz_gr_ts_icon_xuanzhong-5949c25.png">
					</image>
				</view>
				<view class="choice" @click="xuanzedata(2)">
					<view class="choice-text" :style="indextext==2?'color:#ff6144;':'color:#323233;'">发货物流反馈</view>
					<image v-if="indextext==2"
						src="https://duimianimg.loovee.com/style/jww/act/client/feedback/img/mz_gr_ts_icon_xuanzhong-5949c25.png">
					</image>
				</view>
				<view class="choice" @click="xuanzedata(3)">
					<view class="choice-text" :style="indextext==3?'color:#ff6144;':'color:#323233;'">客服服务反馈</view>
					<image v-if="indextext==3"
						src="https://duimianimg.loovee.com/style/jww/act/client/feedback/img/mz_gr_ts_icon_xuanzhong-5949c25.png">
					</image>
				</view>
				<view class="choice" @click="xuanzedata(4)">
					<view class="choice-text" :style="indextext==4?'color:#ff6144;':'color:#323233;'">充值反馈</view>
					<image v-if="indextext==4"
						src="https://duimianimg.loovee.com/style/jww/act/client/feedback/img/mz_gr_ts_icon_xuanzhong-5949c25.png">
					</image>
				</view>
				<view style="width: 100%;height: 39rpx;"></view>
			</view>
		</u-popup>

		<!-- 投诉说明 -->
		<view v-if="explainvalie==true" class="explainbox">
			<view class="explainview">
				<view class="explaintitle">投诉说明</view>
				<view class="explaintimage">
					<image mode="widthFix"
						src="https://duimianimg.loovee.com/style/jww/act/client/feedback/img/mz_ts_tc_shuoming-425cdf7.png">
					</image>
				</view>
				<view class="explaintitext">您使用过程中遇到问题可直接联系在线客服。如遇到其他不满意问题，可在这里通过投诉的方式反馈，我们会有专门的投诉人员为您核实并处理~</view>
				<view class="explaintibuttom" @click="explainvdata">知道了</view>
				<view style="width: 100%;height: 60rpx;"></view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	let app = getApp();
	export default {
		data() {
			return {
				phonevalue: '',
				explainvalie: true,
				lengatue: 0,
				lengatext: '',
				show: false,
				indextext: -1,
				indextitle: '',
				imgList: [],
				arrlist: [],
				srcList: '',
				previewVideoSrc: false,
			}
		},

		onLoad() {},

		methods: {
			//输入内容
			describe(e) {
				this.lengatext = e.detail.value
				this.lengatue = e.detail.value.length
			},

			//输入手机号
			sousuo(e) {
				this.phonevalue = e.detail.value
			},

			//提交
			async buttondata(e) {
				if (this.indextitle == '') {
					uni.showToast({
						title: '请选择投诉问题',
						icon: "none",
					})
					return
				}
				if (this.lengatext == '') {
					uni.showToast({
						title: '请填写投诉内容',
						icon: "none",
					})
					return
				}
				if (this.phonevalue == '') {
					uni.showToast({
						title: '请填写联系电话',
						icon: "none",
					})
					return
				}

				uni.showLoading({
					title: '提交中...',
					mask: true
				})

				let separator = ',';
				let values = this.arrlist.map(item => item.url).join(separator);

				let apply = await request(`${getApp().globalData.http}user/suggest`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "POST", {
					token: getApp().globalData.token,
					title: this.indextitle,
					info: this.lengatext,
					phone: this.phonevalue,
					picture: values,
					video: this.srcList,
				})
				uni.hideLoading()
				if (apply.data.code == 0) {
					this.indextitle = ''
					this.lengatext = ''
					this.phonevalue = ''
					this.imgList = []
					this.arrlist = []
					this.srcList = ''
					uni.showToast({
						title: apply.data.message,
						icon: "none",
					})
				} else {
					uni.showToast({
						title: `${apply.data.message}`,
						icon: "none",
					})
				}

			},

			record(e) {
				uni.navigateTo({
					url: '/pages/feedbacklist/feedbacklist'
				})
			},

			explainvdata(e) {
				this.explainvalie = false
			},

			previewVideo(src) {
				this.previewVideoSrc = true
			},

			previewVideoClose() {
				this.previewVideoSrc = false
			},

			//点击图片，放大预览
			viewImage(index) {
				var arrayArray = []
				for (var i = 0; i < this.arrlist.length; i++) {
					var obj = this.arrlist[i].url
					arrayArray.push(obj);

				}
				uni.previewImage({
					urls: arrayArray, // 需要预览的图片http链接列表
					current: index // 当前显示图片的http链接
				});
			},

			//删除视频
			delectVideo() {
				this.srcList = ''
			},

			//删除图片
			delImg(index) {
				this.arrlist.splice(index, 1);
				this.arrlist = this.arrlist
			},

			//上传图片
			ChooseImage(e) {
				uni.chooseImage({
					count: 5, //默认5
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						this.imgList = this.imgList.concat(res.tempFilePaths)
						this.tudata()
					}
				});
			},

			// 上传图片后端返回图片链接
			tudata(e) {
				var that = this
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				var arr = []
				for (let i = 0; i < that.imgList.length; i++) {
					uni.uploadFile({
						url: `${getApp().globalData.http}upload_picture`,
						filePath: that.imgList[i],
						name: "file",
						formData: {
							token: app.globalData.token,
						},
						success: (res) => {
							var messaget = JSON.parse(res.data)
							arr.push(messaget)
							if (that.imgList.length == arr.length) {
								uni.hideLoading()
								that.arrlist = arr
							}
						},
						fail: (res) => {
							uni.hideLoading()
							uni.showToast({
								title: '发布失败',
								icon: "none",
							})
						}
					})
				}
			},

			// 上传视频
			chooseVideo() {
				console.log('上传视频')
				uni.chooseVideo({
					count: 1,
					compressed: false,
					sourceType: ['camera', 'album'],
					success: (res) => {
						// console.log(res.size, "????")
						var mb = res.size
						var shuyi = mb / 1024 / 1024
						shuyi = parseInt(shuyi)
						// console.log(shuyi, "计算=========")
						if (shuyi >= 20) {
							uni.showToast({
								title: '素材超过20M大小限制，请重新选择',
								duration: 3000,
								icon: "none",
							})
							return
						} else {
							this.videodata(res.tempFilePath)
						}
					}
				})
			},

			// 上传视频后端返回视频链接
			videodata(e) {
				var src = e
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				uni.uploadFile({
					url: `${getApp().globalData.http}upload_picture`,
					filePath: src,
					name: "file",
					formData: {
						token: app.globalData.token,
					},
					success: (res) => {
						uni.hideLoading()
						var messaget = JSON.parse(res.data)
						this.srcList = messaget.url
					},
					fail: (res) => {
						uni.hideLoading()
						uni.showToast({
							title: '发布失败',
							icon: "none",
						})
					}
				})
			},

			open(e) {
				this.show = true
			},

			close(e) {
				this.show = false
			},

			xuanzedata(e) {
				this.indextext = e
				this.show = false
				if (e == 0) {
					this.indextitle = '产品体验反馈'
				} else if (e == 1) {
					this.indextitle = '商品质量反馈'
				} else if (e == 2) {
					this.indextitle = '发货物流反馈'
				} else if (e == 4) {
					this.indextitle = '客服服务反馈'
				} else {
					this.indextitle = '充值反馈'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8fafc;
		padding: 20rpx;
	}

	.fixedimage {
		position: fixed;
		right: 0;
		top: 100rpx;
		width: 69rpx;
		height: 133rpx;
		z-index: 99;
	}

	// 标题
	.title {
		font-size: 29rpx;
		font-weight: bold;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
	}

	// 投诉问题
	.list {
		background: #ffffff;
		// border: 1px solid #e6e6e6;
		box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 0, 0, .05);
		padding: 30rpx 20rpx;
		border-radius: 20rpx;
	}

	.listtext {
		font-size: 28rpx;
		color: #8a8a8a;
		flex: 1;
	}

	// 投诉内容
	.textarea-box {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		background: #ffffff;
		// border: 1px solid #e6e6e6;
		box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 0, 0, .05);
		padding: 20rpx 20rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
	}

	.neirong {
		height: 200rpx;
	}

	.textarea-text {
		display: flex;
		justify-content: flex-end;
		color: #ccc;
		font-size: 23rpx;
	}

	// 填写手机
	.inputbox {
		height: 110rpx;
		// border: 1px solid #e6e6e6;
		background-color: #ffffff;
		box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 0, 0, .05);
		border-radius: 20rpx;
	}

	.searchbar-input {
		height: 100%;
		padding-left: 20rpx;
		flex: 1;

	}

	// 上传图片
	.uploadbox {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.uploadpicture {
		width: 210rpx;
		height: 210rpx;
		margin-bottom: 20rpx;
		margin-right: 25rpx;

	}

	.uploadpicture image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.cuIcon-close image {
		position: absolute;
		right: -10rpx;
		top: -10rpx;
		width: 38rpx;
		height: 38rpx;
	}

	// 上传视频
	.uploadvideo {
		width: 210rpx;
		height: 210rpx;
		position: relative;
		margin-bottom: 20rpx;
		margin-right: 25rpx;
	}

	.uploadvideo image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.uploadvideo video {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.cuIcon-closea {
		position: absolute;
		right: -10rpx;
		top: -10rpx;
		width: 50rpx;
		height: 50rpx;
		z-index: 999;
	}

	.cuIcon-closea image {
		width: 38rpx;
		height: 38rpx;
		margin-left: 8rpx;
	}

	.uploadvideotext {
		width: 200rpx;
		height: 80rpx;
		position: absolute;
		left: 0;
		bottom: 10rpx;
		font-size: 20rpx;
		text-align: center;
		color: #b1b1b1;
	}

	.htz-image-upload-Item-video-fixed {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
		z-index: 996;
	}

	.preview-full {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 1002;
		background-color: #000000;
	}

	.preview-full video {
		width: 100%;
		height: 100%;
		z-index: 1002;
	}

	.preview-full-close {
		position: fixed;
		right: 32rpx;
		top: 25rpx;
		width: 80rpx;
		height: 80rpx;
		line-height: 60rpx;
		text-align: center;
		z-index: 1003;
		color: #fff;
		font-size: 65rpx;
		font-weight: bold;
	}

	// 内容文字
	.titleexplain {
		font-size: 26rpx;
		color: #777777;
	}

	// 提交按钮
	.buttom {
		width: 530rpx;
		height: 85rpx;
		background-color: #30344c;
		border-radius: 50rpx;
		text-align: center;
		line-height: 85rpx;
		color: #ffffff;
		font-size: 33rpx;
		margin: 60rpx auto;
	}

	// 弹窗样式
	.popup-title {
		text-align: center;
		padding: 30rpx 0;
		font-size: 30rpx;
		font-weight: 600;
		position: relative;
	}

	.closebox {
		position: absolute;
		right: 25rpx;
		top: 25rpx;
	}

	.choice {
		width: 100%;
		height: 110rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
	}

	.choice image {
		width: 40rpx;
		height: 40rpx;
	}

	.choice-text {
		font-size: 30rpx;
		flex: 1;
	}

	// 弹窗说明
	.explainbox {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 1002;
		background-color: rgba(0, 0, 0, .7);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.explainview {
		width: 570rpx;
		// height: 680rpx;
		background-color: #ffffff;
		border-radius: 50rpx;
	}

	.explaintitle {
		font-size: 35rpx;
		text-align: center;
		color: #2d2d2d;
		margin-top: 80rpx;
		margin-bottom: 20rpx;
	}

	.explaintimage {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.explaintimage image {
		width: 160rpx;
		height: 160rpx;
	}

	.explaintitext {
		font-size: 29rpx;
		color: #777777;
		padding: 20rpx;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.explaintibuttom {
		width: 400rpx;
		height: 80rpx;
		background-color: #30344c;
		border-radius: 50rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 30rpx;
		color: #ffffff;
		margin: 0 auto;
	}
</style>